<template>
  <div class="app-container">
    <!-- 头部按钮组 -->
    <MenuButton btnType="radio" :radioActive.sync="mealType" />

    <!-- 选择年月日 -->
    <div class="select-date">
      <!-- 年 -->
      <template v-if="mealType == '年统计'">
        <span class="date-title">年份：</span>
        <el-date-picker
          clear-icon="el-icon-circle-close"
          :clearable="false"
          :editable="false"
          v-model="timeData.year"
          value-format="yyyy-MM-dd"
          type="year"
          placeholder="选择年"
          @change="changeDate(0)"
        >
        </el-date-picker>
      </template>

      <template v-if="mealType == '季度统计'">
        <span class="date-title">年份：</span>
        <el-date-picker
          clear-icon="el-icon-circle-close"
          :clearable="false"
          :editable="false"
          v-model="timeData.year"
          value-format="yyyy-MM-dd"
          type="year"
          placeholder="选择年"
          @change="changeDate(1)"
        >
        </el-date-picker>
        <span class="date-title">季度：</span>
        <el-select v-model="quarter" placeholder="请选择">
          <el-option
            v-for="item in quarterList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </template>

      <!-- 月 -->
      <template v-if="mealType == '月统计'">
        <span class="date-title">月份：</span>
        <el-date-picker
          :clearable="false"
          :editable="false"
          v-model="timeData.month"
          value-format="yyyy-MM-dd"
          type="month"
          placeholder="选择月"
          @change="changeDate(2)"
        >
        </el-date-picker>
      </template>

      <!-- 日 -->
      <template v-if="mealType == '日统计'">
        <span class="date-title">号数：</span>
        <el-date-picker
          :editable="false"
          :clearable="false"
          v-model="timeData.date"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期"
          @change="changeDate(3)"
        >
        </el-date-picker>
      </template>
    </div>
    <!-- echarts图表 -->
    <div class="charts">
      <div ref="chart" style="width:100%;height:376px"></div>
    </div>
    <!--<EchartVistis  :data-obj=""/>-->
  </div>
</template>

<script>
import { getShopStatistics } from "@/api";
import MenuButton from "@/components/MenuButton";
// import EchartVistis from "./component/echart_visits";

export default {
  name: "ShopVisits",
  components: {
    MenuButton,
    // EchartVistis
  },

  data() {
    return {
      // 时间数据
      timeData: {
        year: "",
        month: "",
        date: ""
      },
      // 季度
      quarter: 0,
      // 季度列表
      quarterList: [
        {
          value: 0,
          label: "第一季度"
        },
        {
          value: 1,
          label: "第二季度"
        },
        {
          value: 2,
          label: "第三季度"
        },
        {
          value: 3,
          label: "第四季度"
        }
      ],
      //当前表格类型--------------------------------------------
      mealType: "",
      // 搜索条件
      searchForm: {
        endDate: "",
        startDate: "",
        index: "",
        shopUuid: this.$store.getters.shopUuid
      },
      echart_data_model: null,  // 后端返回的数据模型, (原始备份)
      // 经过数据处理生成的模型
      // 建议在修改过程 --> 只修改改变的内容
      echartOption: {
        title: {
          subtext: '总访问量：15610次 拷贝 2',
          subtextStyle: {
            color: '#646464',
            fontSize: "14px",
            textAlign: "right"
          },
          left: 'right',
          textAlign:'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}  访问量: {c}'//a 系列名称，b 数据项名称，c 数值，d 百分比
        },
        xAxis: {
          type: 'category',
          data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
          // 给坐标名字
          // name:'月',
          // nameLocation:'end',
          // nameTextStyle:{
          //   color:"red",
          //   fontSize:16,
          // },
          // 给X轴添加箭头
          axisLine:{
            symbol:['none','arrow'],
            symbolOffset: 8,
            symbolSize: [10, 10]
          },
        },
        
        yAxis: {
          type: 'value',
          // name:'访问量',
          // nameTextStyle:{
          //   color:"red",
          //   fontSize:16,
          // }
        },
        series: [{
          name: '数据系列名称',
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          itemStyle: {
            normal: {
              color: "#0FCE6E"
            }
          }
        }]
      },
      // 获取Echart挂载节点
      myChart: null,
      echartResizeEvent() {
        this.myChart.resize();
      }
    }
  },
  watch: {
    mealType(newVal) {
      let type = "";
      switch (newVal) {
        case "年统计":
          type = 0;
          break;
        case "季度统计":
          type = 1;
          break;
        case "月统计":
          type = 2;
          break;
        case "日统计":
          type = 3;
          break;
      }
      this.changeDate(type);
    },
    quarter() {
      this.changeDate(1);
    }
  },
  created() {
    this.initDate();
  },

  methods: {
    initDate() {
      let dateData = new Date();
      const yearStr = dateData.getFullYear().toString();
      const monthStr =
        yearStr +
        "-" +
        (dateData.getMonth() >= 10
          ? dateData.getMonth() + 1
          : "0" + (dateData.getMonth() + 1));
      const dateStr = monthStr + "-" + dateData.getDate();
      this.timeData = {
        year: yearStr + "-01-01",
        month: monthStr + "-01",
        date: dateStr
      };
    },

    // 日期改变
    changeDate(type) {
      switch (type) {
        case 0:
          this.searchForm.startDate = this.timeData.year;
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
        case 1:
          let arr = this.timeData.year.split("-");
          arr[1] =
            parseInt(arr[1]) + this.quarter * 3 >= 10
              ? parseInt(arr[1]) + this.quarter * 3
              : "0" + (parseInt(arr[1]) + this.quarter * 3);
          this.searchForm.startDate = arr.join("-");
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
        case 2:
          this.searchForm.startDate = this.timeData.year;
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
        case 3:
          this.searchForm.startDate = this.timeData.year;
          this.searchForm.endDate = type;
          this.searchForm.index = type;
          break;
      }

      this.getShopStatistics().then(res => {
        // TODO 在处理好之后根据生成的数据模型, 重新初始化 Echart
        this.initEchart()
        
      });
    },

    //获取信息--------------------------------------------
    async getShopStatistics() {
      const parent = {
        ...this.searchForm
      };
      let res = await getShopStatistics(parent).catch(err => console.log(err));
      // TODO 暂时未清楚后端返回的数据类型
      if (!res) {
        this.$message.error("获取统计模型异常");
        return false
      } else {
        return this.resolveData(res);
      }
    },
    // deal with Data
    // 处理数据信息
    resolveData(res) {
      // TODO 处理好之后, 此处会生成 EchartOption
      return res
    },
    initEchart() {
      const chart = this.$refs.chart;
      if (!chart) {
        this.$message.error("未找到Echart挂载节点");
        console.warn("未找到Echart挂载节点");
        return false
      }
      
      const myChart = this.$echarts.init(chart);
      this.myChart = myChart;
      myChart.setOption(this.echartOption);
      // 添加动态修正
      window.removeEventListener("resize", this.echartResizeEvent);
      window.addEventListener("resize", this.echartResizeEvent);
    }
    
  },
  destroyed() {
    if (this.myChart || this.echartResizeEvent) {
      // 为发现挂载节点
      // return false;
    } else {
      window.removeEventListener("resize", this.echartResizeEvent);
    }
    /*window.addEventListener("resize", function() {
      myChart.resize();
    });*/
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/element-ui.scss";
::v-deep.app-container {
  .select-date {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
    margin-top: 16px;
    .el-date-editor,
    .el-input {
      width: 318px;
      margin-right: 40px;
      & > input {
        cursor: pointer;
      }
    }

    .date-title {
      white-space: nowrap;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #646464;
      margin-right: 17px;
    }
  }

  .purchase {
    margin: 0 auto;
    width: 84px;
    height: 36px;
    background: #ecfff1;
    border: 1px solid #44d26c;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    & > i {
      font-size: 16px;
      color: #44d26c;
      margin-right: 10px;
    }

    & > span {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #44d26c;
      line-height: 60px;
    }

    &:hover {
      background-color: #44d26c;
      & > i,
      span {
        color: #ecfff1;
      }
    }
  }

  .delete {
    color: $--color-danger;
    cursor: pointer;
  }
}
</style>
